<template>
  <view class="page">
    <Header></Header>
    <view class="main_container">
      <view class="main_content">
        <Breadcrumb :text="'主页-分级阅读-' + courseName + '-' + levelName">
        </Breadcrumb>
        <view class="content">
          <view class="title"> {{ courseName }}/{{ levelName }} </view>
          <view class="box">
            <scroll-view scroll-x="true" class="chapter">
              <view class="chapter_container" v-if="chapterList.length > 0">
                <view class="chapter_content">
                  <view
                    class="chapter_box"
                    v-for="(item, index) in chapterList"
                    :key="index"
                    @click="startLearning(item)"
                    :class="{
                      complete: index < currentChapterIndex,
                      ing: index === currentChapterIndex,
                      incomplete: index > currentChapterIndex,
                    }"
                  >
                    <view class="chapter_circle">
                      <view
                        class="chapter_text"
                        v-if="index < currentChapterIndex"
                      >
                        已学
                      </view>
                      <image
                        v-if="index === currentChapterIndex"
                        style="width: 93rpx; height: 98rpx"
                        src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/common/book.png"
                        mode="scaleToFill"
                      />
                      <image
                        v-if="index > currentChapterIndex"
                        style="width: 82rpx; height: 102rpx"
                        src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/common/lock.png"
                        mode="scaleToFill"
                      />
                    </view>
                    <view class="chapter_title">{{ item.chapterName }}</view>
                  </view>
                </view>
              </view>
            </scroll-view>
          </view>
        </view>
      </view>
    </view>
    <Tips :show="showTips"></Tips>
  </view>
</template>
<script>
import { getArticleList, getLevelList } from "@/api/read";
export default {
  components: {},
  computed: {
    courseName() {
      return this.courseNameObject[this.courseId];
    },
  },
  onLoad(option) {
    this.courseId = option.courseId;
    this.levelId = option.levelId;
    this.init();
  },
  data() {
    return {
      routeList: [
        {
          name: "主页",
          url: "",
        },
        {
          name: "分级阅读",
          url: "",
        },
      ],
      courseNameObject: {
        1: "小学英语分级精读训练",
        2: "初中英语分级精读训练",
        3: "高中英语分级精读训练",
        4: "初一英语阅读专项训练",
        5: "初二英语阅读专项训练",
        6: "初三英语阅读专项训练",
      },
      courseId: "",
      levelId: "",
      levelName: "",
      levelList: [],
      chapterList: [],
      currentChapterIndex: 0,
      showTips: false,
    };
  },
  methods: {
    init() {
      this.getLevel();
      this.getArticle();
    },
    getLevel() {
      let params = {
        courseId: this.courseId,
      };
      getLevelList(params).then((res) => {
        this.levelList = res.data;
        this.levelList.some((item) => {
          if (this.levelId === item.id) {
            this.levelName = item.levelName;
            return true;
          }
        });
      });
    },
    getArticle() {
      let params = {
        courseId: this.courseId,
        levelId: this.levelId,
      };
      getArticleList(params).then((res) => {
        this.chapterList = res.data.articleList;
        this.currentChapterIndex = this.chapterList.findLastIndex(
          (item) => !item.lockFlag
        );
      });
    },
    startLearning(item) {
      if (item.lockFlag) {
        this.showTips = true;
        setTimeout(() => {
          this.showTips = false;
        }, 2000);
        return;
      }
      uni.navigateTo({
        url: `/pages/read/readDetail?courseId=${this.courseId}&levelId=${this.levelId}&articleId=${item.id}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./readChapter";
</style>
